<template>
  <a-alert type="info" showIcon :class="[prefixCls]">
    <template #message>
      <span v-if="props.count > 0">
        {{ t("component.table.selectionBarTips", { count: props.count }) }}
      </span>
      <span v-else>
        {{ t("component.table.selectionBarEmpty") }}
      </span>
      <a-button
        type="link"
        @click="clearSelectedRowKeys"
        size="small"
        v-show="props.count > 0"
      >
        {{ t("component.table.selectionBarClear") }}
      </a-button>
    </template>
  </a-alert>
</template>

<script lang="ts" setup>
import { useI18n } from "@/hooks/web/useI18n";
import { useDesign } from "@/hooks/web/useDesign";

import type { TableActionType } from "../types/table";
import { Alert as AAlert } from "ant-design-vue";

const { t } = useI18n();

const { prefixCls } = useDesign("table-select-bar");

defineOptions({
  name: "TableSelectBar",
});

const props = withDefaults(
  defineProps<{
    count?: number;
    //
    clearSelectedRowKeys: TableActionType["clearSelectedRowKeys"];
  }>(),
  {
    count: () => 0,
  },
);
</script>

<style lang="less" scoped>
@prefix-cls: ~"@{namespace}-table-select-bar";

.@{prefix-cls} {
  flex-grow: 1;
  padding: 2px 8px;

  :deep(.ant-btn-link) {
    height: 20px;
    line-height: 20px;
  }
}
</style>
